<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>颜色选择器</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <link href="./../../../static/plugins/colpick/css/colpick.css" rel="stylesheet" />
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            基本示例
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div id="picker01"></div>
                                </div>
                                <div class="col-sm-6">
                                    <div id="picker02"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            布局模式：
                        </div>
                        <div class="panel-body">
                            <div class="col-sm-4">
                                <div id="picker03"></div>
                            </div>
                            <div class="col-sm-4">
                                <div id="picker04"></div>
                            </div>
                            <div class="col-sm-4">
                                <div id="picker05"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            组合应用
                        </div>
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">输入框选择颜色：</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" type="text" id="picker06" readonly
                                            style="width:200px;border-right:50px solid;"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">点击显示：</label>
                                    <div class="col-sm-9">
                                        <div class="row">
                                            <a href="javascript:;" class="btn btn-default btn-sm"
                                                id="pickbtn">点击选择颜色</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/colpick/js/colpick.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#picker01').colpick({ flat: true });
            $('#picker02').colpick({ flat: true, colorScheme: 'dark' });
            $('#picker03').colpick({
                flat: true,
                layout: 'full',
                submitText: '提交'
            });
            $('#picker04').colpick({
                flat: true,
                layout: 'rgbhex',
            });
            $('#picker05').colpick({
                flat: true,
                layout: 'hex',
                submit: true
            });
            $("#pickbtn").colpick();
            $('#picker06').colpick({
                layout: 'hex',
                submit: 0,
                onChange: function (hsb, hex, rgb, el, bySetColor) {

                    $(el).css('border-color', '#' + hex);
                    if (!bySetColor) $(el).val('#' + hex);
                }
            }).keyup(function () {
                $(this).colpickSetColor(this.value);
            });
        });
    </script>
</body>

</html>